<template>
    <view class="contanier">
        <view class="form-wrap">
            <view class="form-item">
                <view class="title-wrap">性别</view>
                <view class="label-wrap">
                    <uni-data-checkbox v-model="formData.gender" :selectedColor="global.THEME_COLOR" :localdata="genders"></uni-data-checkbox>
                </view>
            </view>


            <view class="btn-wrap">
                <text class="btn" @click="handlerSave">保 存</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { inject, reactive, ref } from "vue"
import { useUserStore } from '@/stores'

// 全局属性
const global: any = inject('global')


// 定义性别数据
const genders = ref([
    {
        text: '男',
        value: 1
    },
    {
        text: '女',
        value: 0
    },
    {
        text: '保密',
        value: 2
    }
])

// 用户存储
const userStore = useUserStore()

// 定义提交参数
const formData: any = reactive({
	gender: userStore.profile.user?.gender,
})


// 保存数据
const handlerSave = async () => {
    await userStore.editOtherInfo(formData)
    uni.showToast({
        title: '修改成功',
        duration: 1000
    })
}
</script>

<style scoped lang="scss">
.contanier {
    padding: 20rpx 10rpx 0 10rpx;
    .form-wrap {
        background-color: #fff;
        padding: 10rpx;
        .form-item {
            padding: 20rpx;

            display: flex;
            align-items: center;
            .title-wrap {
                width: 100rpx;
                text-align: end;
            }
            .label-wrap {
                margin-left: 30rpx;
            }
        }
    }

    // 保存按钮区域
    .btn-wrap {
        padding-top: 30rpx;
        padding-bottom: 20rpx;
        display: flex;
        justify-content: center;
        border-top: 2rpx solid #ccc;
        .btn {
            display: block;
            width: 600rpx;
            height: 70rpx;
            line-height: 70rpx;
            border-radius: 35rpx;
            color: #fff;
            text-align: center;
            background-color: $uni-color-primary;
        }
    }
}
</style>